<template>
  <div id="users">
    <!-- 顶部搜索表格 -->
    <!-- 表格列表 -->
    <!-- 表格信息条 -->
    <div class="table setpadding">
      <table-box ref="allocTable" :table-config="tableConfig" :other-filters="otherFilters" :selected-arry.sync="checkOption" @row-click="messageUp" />
    </div>
    <!-- 表格列表 -->
    <!-- 消息通知弹出层 -->
    <el-dialog :visible.sync="showRepeatInfo" width="37%" :before-close="handleClose" custom-class="DtlClass">
      <span slot="title" class="dialog-header Dtltitle">
        <svg-icon class-name="myclass" icon-class="xiaoxitishi-solid" style="color:#FFAB00;margin-right:7px;font-size:14px" />
        {{ detailDt.title }} <div class="setdateCss">{{ date }}</div>
      </span>
      <div style="padding-left:26px;color:#666666">{{ detailDt.content }}</div>
      <span slot="footer" class="dialog-footer footer">
        <el-button type="primary" size="mini" @click="showRepeatInfo = false">知道了</el-button>
      </span>
    </el-dialog>
    <!-- 消息通知弹出层 -->
  </div>
</template>
<script>
import { getRoleGroupList } from '@/api/message'
import { replaceUrlToLink } from '@/utils/index'
/* eslint-disable */
  export default {
    // 判断是从哪个路由跳往订单分配，或者是外购件管理模块下的订单分配
    // 也需要一个路由跳往这个页面携带变量来判断当前节点流程，是订单分配节点还是订单分配(复审)节点
    name: 'SystemMessage',
    data() {
      return {
        link:'',
        detailDt:{},
        date:'',
        showRepeatInfo:false,
        radio: '',
        checkOption:[],
        olnIds:[],//olnID数据数组
        selected: {}, //选中行数据
        // pageTotal: 20,
        // pageIndex: 1,
        // pageSizes: [5, 10, 15, 20],
        // pageSize: 5,
        orderSearchList: {
          agreenmentNum: '',
          orderNum: '',
          Type: '',
          broker: '',
          userName: '',
          dealPerson: '',
          startTime: '',
          endTime: ''
        },
        current: 3,
        dialogTableVisible: false,
        orderTableDt: [],
        // setShow: false,
        btnText: '更多',
        startTime: '',
        endTime: '',
        personAlloc:[],
         tableConfig: {
            interfacePath: '/ucenter/api/message/page',
             pageSize: 20,
             tablePage: [20, 40, 60, 80, 100],
              pageFlag:true,
            //   btnList: [{
            //     buttonName: '消息',
            //     optCode: 'messageUp',
            //     outerFlag: true
            //   }],   
              setting:[{
                label:"来源",
                prop:"moduleName"
              },{
                label:"待审批",
                prop:"content",
              },{
                label:"时间",
                prop:"createTime",
                type:"picklist",
                propInterface: "/oms/api/Common/GetStatusListByModuleName?moduleName=OrderType",
              }]
      },
      otherFilters:[     
        ],
      }
    },
    mounted(){
    },
    methods: {
      jumpMsgDetail(){
    this.link= replaceUrlToLink(this.link)
      },
      handleClose(){
         this.showRepeatInfo=false
      },
        messageUp(row){  
          let msgId=row.row.msgId
          // 替换横杠为/，截取空格后内容
          this.date =row.row.createTime.trim().split(' ')[0].replace(/\-/g,'/' )
           getRoleGroupList(msgId).then((res)=>{
             if(res.success==1){
               this.detailDt =res.data
               this.showRepeatInfo=true
        //        this.$nextTick(()=>{
        //              this.$alert(`<div class="contentBox"><div class="content">${res.data.content}</div>
        //              <div style="display:inline-block;padding-left:20px;font-size:12px;color:#666666">${date}</div><i class="el-icon-close el-message-box__close" style="float:right;margin-top:5px" @click='close'></i></div><div style="padding: 0 20px 47px 26px;color:"#666666">${res.data.title}</div>`, res.data.title, {
        //   dangerouslyUseHTMLString: true,
        //    customClass:'messageCss',
        //    confirmButtonText: '知道了',
        // });
        //        })
            
             }
           })
           
        },
        close(){
          
        }
    }
  }

</script>
<style lang="scss" scoped>
  /deep/ .el-table__row {
    cursor: pointer;
  }
.footer  /deep/ .el-dialog .el-dialog__footer{
    height:48px;
    line-height: 48px
  }
  .Dtltitle{
    font-size: 14px;
    color:#333333;
    font-weight: 700;
  }
  .setdateCss{
    display:inline-block;
    color:#666666;
    font-weight: normal;
    font-size: 12px;
    padding-left:18px
  }
.setpadding{
  padding: 10px 10px 0 10px;
}
.el-dialog .el-table{
  padding-left: 5px;
   padding-right: 5px;
}
  #message /deep/ .el-dialog__header {
  border-bottom: 1px solid #eee;
    padding-bottom: 8px;
    padding-top: 8px;
    /* font-size: 14px; */
    color:#666;
  }

  // #message /deep/ .el-form-item__content {
  //   display: flex;
  // }

  // #message /deep/ .el-form-item__label {
  //   min-width: 90px;
  // }

  .pager-box {
    background: #fff;
    padding-top: 20px;
    text-align: center;
  }

  .el-table--enable-row-transition .el-table__body td {
    padding-left: 10px;
  }

  .userSearchBox {
    padding: 5px 20px 8px 20px;
    background: #fff;
    margin-bottom: 2px;
  }
.setSearchBoxpadding{
    padding:13px 20px 13px 20px!important;
    background: #fff;
    margin-bottom: 2px;
}
  .setupperdown {
    cursor: pointer;
    z-index: 399;
    font-size: 12px;
    position: absolute;
    top: 0;
    right: 65px;
  }

  .table {
    margin-top: 0px;
  }
   #message /deep/ .el-dialog__footer{
    padding:12px 20px;
  }
   #message /deep/ .el-dialog{
    width: 43%;
  }
  .setrotatedown {
    transform: rotate(-270deg);
    transition: 0.2s;
  }

  .setrotatetop {
    transform: rotate(-90deg);
    transition: 0.2s;
  }

  .setborderPad {
    margin-bottom: 3px;
  }
.el-button{
  color:#fff;
}
.setTb /deep/ .el-dialog .el-table{
  padding-left: 5px;
  padding-right: 5px;
}
</style>
<style lang="scss">
  .DtlClass .el-dialog__footer{
  height:50px;
  line-height: 50px
  }
  #message /deep/  .el-dialog__body{
    padding:5px;
    font-size: 14px;
  }
  #message /deep/  .el-dialog__body tbody{
    font-size: 12px;
  }
  .el-table td{
    width: 8px;
  }
  /deep/ .el-message-box__title::after{
    content: '333';
    color:#333;
  }
  .el-message-box{
    width:460px;
  }
</style>
